<div class="toolbar">
    <h4>按钮</h4>
    <p class="text-muted">按钮指令可以帮助我们快速的创建一个按钮，支持颜色，尺寸等。
        <a href="https://www.cool1024.com/gitbook/BUTTON.html" target="blank">参考文档</a>
    </p>
</div>
<div class="p-2">
    <div class="card mb-2">
        <div class="card-header bg-white"> 指令参数 @Directive </div>
        <div class="card-body m-btn">
            <p>选择器：
                <code>button[tsBtn] </code>
                <button tsBtn color="white">Button</button>
            </p>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">属性名称</th>
                        <th scope="col">类型</th>
                        <th scope="col">说明</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">color</th>
                        <td>
                            <code>string</code>
                        </td>
                        <td>颜色设置，bootstrap的基础颜色[danger,light,info...]</td>
                    </tr>
                    <tr>
                        <th scope="row">disabled</th>
                        <td>
                            <code>boolean</code>
                        </td>
                        <td>是否禁用按钮</td>
                    </tr>
                    <tr>
                        <th scope="row">outline</th>
                        <td>
                            <code>boolean 不设值时为启用</code>
                        </td>
                        <td>添加这个属性按钮将会使用outline样式</td>
                    </tr>
                    <tr>
                        <th scope="row">sm</th>
                        <td>
                            <code>boolean 不设值使用为启用</code>
                        </td>
                        <td>添加这个属性按钮会变小</td>
                    </tr>
                    <tr>
                        <th scope="row">lg</th>
                        <td>
                            <code>boolean 不设值时为启用</code>
                        </td>
                        <td>添加这个属性按钮会变大</td>
                    </tr>
                    <tr>
                        <th scope="row">loading</th>
                        <td>
                            <code>string 不设值使用默认图标（默认图标可以全局配置）</code>
                        </td>
                        <td>添加这个属性点击按钮会有加载动画，默认加载图标为loading</td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-striped mt-2">
                <thead>
                    <tr>
                        <th scope="col">事件名称</th>
                        <th scope="col">事件类型</th>
                        <th scope="col">说明</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">submit</th>
                        <td>
                            <code>Loader</code>
                        </td>
                        <td>当按钮设置了loading属性时，每次按下按钮会触发submit绑定的方法,$event用来关闭动画</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card mb-2">
        <div class="card-header bg-white">按钮颜色</div>
        <div class="card-body m-btn">
            <button tsBtn>Default</button>
            <button tsBtn color="white">White</button>
            <button tsBtn color="primary">Primary</button>
            <button tsBtn color="secondary">Scondary</button>
            <button tsBtn color="success">Success</button>
            <button tsBtn color="warning">Pink</button>
            <button tsBtn color="danger">Purple</button>
            <button tsBtn color="info">Info</button>
        </div>
    </div>
    <div class="card mb-2">
        <div class="card-header bg-white">空心按钮</div>
        <div class="card-body m-btn">
            <button tsBtn outline>Default</button>
            <button tsBtn outline color="white">White</button>
            <button tsBtn outline color="primary">Primary</button>
            <button tsBtn outline color="secondary">Scondary</button>
            <button tsBtn outline color="success">Success</button>
            <button tsBtn outline color="warning">Pink</button>
            <button tsBtn outline color="danger">Purple</button>
            <button tsBtn outline color="info">Info</button>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="card mb-2">
                <div class="card-header bg-white">尺寸</div>
                <div class="card-body m-btn">
                    <button tsBtn sm>Small</button>
                    <button tsBtn>Default</button>
                    <button tsBtn lg>Large</button>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card mb-2">
                <div class="card-header bg-white">加载动画</div>
                <div class="card-body m-btn">
                    <button tsBtn loading sm (submit)="doSubmit($event)">Small</button>
                    <button tsBtn loading (submit)="doSubmit($event)">Default</button>
                    <button tsBtn loading lg (submit)="doSubmit($event)">Large</button>
                </div>
            </div>
        </div>
    </div>
</div>